/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 190px;
}

body {
    background: #f3f6fa;
    color: #20242a;
    line-height: 1.6;
    background-image: url("images Miguel Isaza/fondo-quimica.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --azul: #0056b3;
    --azul-oscuro: #003d80;
    --azul-claro: #3f51b5;

    --fondo: #f3f6fa;
    --blanco: #ffffff;

    --texto: #20242a;
    --texto-suave: #667085;

    --borde: #e2e7ee;

    --sombra-suave:
        0 8px 25px rgba(16, 24, 40, .07);

    --sombra:
        0 12px 35px rgba(16, 24, 40, .10);
}


/* =========================================================
   HEADER
========================================================= */

header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    min-height: 90px;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 45px;

    background: rgba(255, 255, 255, .96);

    border-radius: 0 0 22px 22px;

    border-bottom: 1px solid rgba(0, 0, 0, .05);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, .07);

    backdrop-filter: blur(10px);
}

header a {
    text-decoration: none;
    color: #333;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 1.1rem;

    font-weight: 700;

    color: #20242a;
}

.logo img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}


/* =========================================================
   NAVEGACIÓN DEL HEADER
========================================================= */

nav {
    display: flex;
    align-items: center;

    gap: 5px;
}

nav a {
    padding: 10px 15px;

    border-radius: 12px;

    font-size: .95rem;

    font-weight: 400;

    color: #3f4650;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

nav a:hover {
    background: #eef4ff;

    color: var(--azul);

    transform: translateY(-1px);
}


/* =========================================================
   PORTADA
========================================================= */

.portada {
    position: relative;

    width: 86%;

    min-height: 570px;

    margin: 125px auto 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    text-align: center;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #004b9b 0%,
            #0056b3 45%,
            #3f51b5 100%
        );

    box-shadow: var(--sombra);
}


/* =========================================================
   DECORACIONES PORTADA
========================================================= */

.portada::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -230px;
    left: -140px;

    border-radius: 50%;

    border: 70px solid rgba(255,255,255,.06);
}

.portada::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    bottom: -300px;
    right: -180px;

    border-radius: 50%;

    border: 80px solid rgba(255,255,255,.05);
}


/* =========================================================
   CONTENIDO PORTADA
========================================================= */

.portada-contenido {
    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 900px;

    color: white;
}


/* =========================================================
   LOGO PORTADA
========================================================= */

.logo-portada {
    width: 105px;
    height: 105px;

    object-fit: contain;

    margin-bottom: 16px;

    filter:
        drop-shadow(
            0 5px 10px rgba(0,0,0,.18)
        );
}


/* =========================================================
   INSTITUCIÓN
========================================================= */

.portada-institucion {
    margin-bottom: 20px;

    color: rgba(255,255,255,.9);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-align: center;
}


/* =========================================================
   TÍTULO PORTADA
========================================================= */

.portada h1 {
    max-width: 850px;

    margin: 0 auto 18px;

    color: white;

    font-size: 43px;

    line-height: 1.15;

    font-weight: 750;

    letter-spacing: -.5px;

    text-align: center;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.portada-subtitulo {
    margin-bottom: 22px;

    color: rgba(255,255,255,.92);

    font-size: 19px;

    text-align: center;
}


/* =========================================================
   LÍNEA PORTADA
========================================================= */

.linea-portada {
    width: 75px;

    height: 3px;

    margin: 22px auto;

    background: rgba(255,255,255,.9);

    border-radius: 10px;
}


/* =========================================================
   DATOS PORTADA
========================================================= */

.portada-autor {
    margin-bottom: 5px;

    font-size: 17px;

    text-align: center;
}

.portada-datos {
    margin-bottom: 27px;

    color: rgba(255,255,255,.88);

    font-size: 15px;

    line-height: 1.7;

    text-align: center;
}


/* =========================================================
   BOTÓN PORTADA
========================================================= */

.btn-portada {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    padding: 12px 24px;

    background: white;

    color: var(--azul);

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 7px 18px rgba(0,0,0,.15);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.btn-portada:hover {
    transform: translateY(-3px);

    background: #f8fafc;

    box-shadow:
        0 10px 24px rgba(0,0,0,.2);
}


/* =========================================================
   MENÚ FLOTANTE
========================================================= */

.navegador-secciones {
    position: fixed;

    top: 115px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    filter:
        drop-shadow(
            0 5px 12px rgba(0,0,0,.08)
        );

    /* Oculto inicialmente */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}


/* =========================================================
   MENÚ VISIBLE DESDE PREGUNTA PROBLEMA
========================================================= */

.navegador-secciones.menu-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

/* =========================================================
   BOTÓN BÚSQUEDA - TRANSLÚCIDO
========================================================= */

.barra-secciones {
    width: 175px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    cursor: pointer;

    /*
       Azul ligeramente transparente
    */
    background:
        rgba(0, 86, 179, .82);

    /*
       Efecto cristal
    */
    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    /*
       Borde translúcido
    */
    border: 1px solid rgba(255,255,255,.25);

    border-radius: 30px;

    /*
       Sombra exterior + brillo interior
    */
    box-shadow:
        0 8px 22px rgba(0,86,179,.25),
        inset 0 1px 1px rgba(255,255,255,.18);

    transition:
        width .45s ease,
        background .3s ease,
        box-shadow .3s ease,
        border-radius .35s ease;
}


/* =========================================================
   BARRA ABIERTA
========================================================= */

.barra-secciones:hover {
    width: 1250px;

    padding: 0 15px;

    background:
        rgba(0, 86, 179, .88);

    box-shadow:
        0 10px 28px rgba(0,86,179,.30),
        inset 0 1px 2px rgba(255,255,255,.20);

    border-color:
        rgba(255,255,255,.32);
}


/* =========================================================
   TEXTO "BÚSQUEDA"
========================================================= */

.texto-busqueda {
    color:
        rgba(255,255,255,.95);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .2px;

    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(0,0,0,.18);

    transition:
        opacity .25s ease,
        width .35s ease,
        transform .3s ease;
}


/* =========================================================
   OCULTAR BÚSQUEDA AL ABRIR
========================================================= */

.barra-secciones:hover .texto-busqueda {
    width: 0;

    opacity: 0;

    transform: scale(.9);
}


/* =========================================================
   CONTENEDOR DE ENLACES
========================================================= */

.links {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: 0;

    opacity: 0;

    overflow: hidden;

    transition: .35s;
}

.barra-secciones:hover .links {
    width: auto;

    opacity: 1;
}


/* =========================================================
   BOTONES DEL MENÚ
========================================================= */

.links a {
    padding: 8px 12px;

    color: rgba(255,255,255,.96);

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 9px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    text-decoration: none;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08);

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.links a:hover {
    background:
        rgba(255,255,255,.95);

    color:
        var(--azul);

    transform:
        translateY(-2px);

    box-shadow:
        0 4px 10px rgba(0,0,0,.12);
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

main {
    width: 86%;

    margin: 0 auto;

    padding-top: 0;

    padding-bottom: 45px;
}


/* =========================================================
   SECCIONES
========================================================= */

section:not(.portada) {
    position: relative;

    padding: 28px 30px;

    margin-bottom: 24px;

    background: white;

    border: 1px solid var(--borde);

    border-radius: 16px;

    box-shadow: var(--sombra-suave);

    scroll-margin-top: 190px;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

section:not(.portada):hover {
    box-shadow:
        0 12px 30px rgba(16,24,40,.09);
}


/* =========================================================
   TÍTULOS
========================================================= */

h2 {
    position: relative;

    margin-bottom: 22px;

    padding-bottom: 11px;

    color: #182230;

    font-size: 1.65rem;

    line-height: 1.3;
}

h2::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 48px;

    height: 3px;

    background: var(--azul);

    border-radius: 5px;
}

h3 {
    margin: 15px 0 10px;

    color: #26364a;

    font-size: 1.15rem;
}


/* =========================================================
   PÁRRAFOS
========================================================= */

p {
    margin-bottom: 12px;

    color: #3f4650;

    font-size: 15.5px;

    line-height: 1.75;

    text-align: justify;
}


/* =========================================================
   LISTAS
========================================================= */

ul {
    margin-left: 22px;

    color: #3f4650;
}

li {
    margin-bottom: 9px;

    line-height: 1.6;
}


/* =========================================================
   DOS COLUMNAS
========================================================= */

section.col2 {
    column-count: 2;

    column-gap: 45px;

    column-rule: 1px solid #e5e7eb;
}

section.col2 h2,
section.col2 h3 {
    column-span: all;
}

section.col2 p {
    break-inside: avoid;
}

/* Evitar que imágenes, figuras y tablas se corten entre columnas */
section.col2 img,
section.col2 table,
section.col2 .imagen-ampliable {
    break-inside: avoid;
}

/* Evitar que el título "Figura X" quede separado de su contenido */
section.col2 h3 {
    break-after: avoid;
    break-inside: avoid;
}

/* Evitar que el subtítulo en negrita quede separado de la imagen */
section.col2 h3 + p {
    break-after: avoid;
}


/* =========================================================
   TABLAS
========================================================= */

table {
    width: 100%;

    margin: 20px 0;

    border-collapse: collapse;

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.06);
}

th {
    padding: 13px 12px;

    background: var(--azul);

    color: white;

    font-size: 14px;

    text-align: center;
}

td {
    padding: 12px;

    border-bottom:
        1px solid #e6e9ee;

    color: #404854;

    font-size: 14px;

    text-align: center;
}

tr:nth-child(even) td {
    background: #f7f9fc;
}

tr:hover td {
    background: #eef4ff;
}


/* =========================================================
   IMÁGENES
   TODAS ALINEADAS A LA IZQUIERDA
========================================================= */

.imagen-ampliable {
    position: relative;

    width: 60%;

    height: 260px;

    /*
       Importante:
       no usar auto en los laterales
    */
    margin: 25px 0;

    overflow: hidden;

    border-radius: 14px;

    cursor: pointer;

    background: #eef1f5;

    box-shadow:
        0 5px 18px rgba(0,0,0,.08);
}

.imagen-ampliable img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   VISTA PREVIA
========================================================= */

.preview-recortada {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition:
        transform .35s ease;
}

.imagen-ampliable:hover
.preview-recortada {
    transform:
        scale(1.04);
}


/* =========================================================
   BOTÓN AMPLIAR
========================================================= */

.btn-ampliar {
    position: absolute;

    top: 12px;

    right: 12px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background:
        rgba(20,25,30,.78);

    color: white;

    font-size: 20px;

    cursor: pointer;

    z-index: 5;

    transition:
        transform .25s ease,
        background .25s ease;
}

.btn-ampliar:hover {
    background:
        var(--azul);

    transform:
        scale(1.08);
}


/* =========================================================
   VISOR DE IMAGEN
========================================================= */

#visor-imagen {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 99999;

    align-items: center;

    justify-content: center;

    background:
        rgba(8,12,18,.94);

    backdrop-filter:
        blur(4px);
}

#visor-imagen img {
    max-width: 94%;

    max-height: 92%;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

#visor-imagen span {
    position: absolute;

    top: 18px;

    right: 30px;

    color: white;

    font-size: 42px;

    cursor: pointer;

    transition:
        transform .2s ease;
}

#visor-imagen span:hover {
    transform:
        scale(1.1);
}


/* =========================================================
   FIGURA 3
========================================================= */

.preview-figura3 {
    object-position:
        center center;

    transform:
        scale(1.35);
}


/* =========================================================
   FIGURA 7
========================================================= */

.preview-figura7 {
    object-fit: cover;

    object-position:
        left top;

    transform:
        scale(2.58);

    transform-origin:
        top left;
}


/* =========================================================
   FIGURA 8
========================================================= */

.preview-figura8 {
    object-fit: cover;

    object-position:
        center center;

    transform:
        scale(1.88);

    transform-origin:
        top left;
}


/* =========================================================
   HOVER FIGURAS
========================================================= */

.imagen-ampliable:hover
.preview-figura3 {
    transform:
        scale(1.48);
}

.imagen-ampliable:hover
.preview-figura7 {
    transform:
        scale(2.70);
}

.imagen-ampliable:hover
.preview-figura8 {
    transform:
        scale(2);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 25px 20px;

    background: white;

    border-top:
        1px solid var(--borde);

    color: #667085;

    text-align: center;
}

footer p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE - 1100 PX
========================================================= */

@media (max-width: 1100px) {

    header {
        padding:
            12px 25px;
    }

    .logo span {
        font-size: 1rem;
    }

    nav a {
        padding:
            8px 10px;

        font-size: .9rem;
    }

    .portada,
    main {
        width: 90%;
    }

    .barra-secciones:hover {
        width: 95vw;
    }
}


/* =========================================================
   RESPONSIVE - 900 PX
========================================================= */

@media (max-width: 900px) {

    header {
        padding:
            10px 20px;
    }

    .logo {
        gap: 10px;

        font-size: .95rem;
    }

    .logo img {
        width: 52px;

        height: 52px;
    }

    nav {
        gap: 3px;
    }

    nav a {
        padding:
            7px 8px;

        font-size: .8rem;
    }

    .navegador-secciones {
        top: 105px;

        max-width: 96%;
    }

    .portada {
        width: 92%;

        min-height: 520px;

        margin-top: 120px;
    }

    .portada h1 {
        font-size: 36px;
    }

    main {
        width: 92%;
    }

    section.col2 {
        column-count: 1;
    }

    .imagen-ampliable {
        width: 75%;

        margin-left: 0;

        margin-right: auto;
    }
}


/* =========================================================
   RESPONSIVE - 650 PX
========================================================= */

@media (max-width: 650px) {

    header {
        min-height: 80px;

        padding:
            10px 15px;
    }

    .logo {
        font-size: .85rem;
    }

    .logo img {
        width: 48px;

        height: 48px;
    }


    /* -----------------------------------------
       NAVEGACIÓN
    ----------------------------------------- */

    nav {
        display: none;
    }


    /* -----------------------------------------
       MENÚ FLOTANTE
    ----------------------------------------- */

    .navegador-secciones {
        top: 95px;

        width: 94%;

        max-width: 94%;

        overflow-x: auto;
    }

    .barra-secciones {
        width: 160px;

        height: 45px;
    }

    .barra-secciones:hover {
        width: 94vw;
    }

    .links {
        gap: 5px;
    }

    .links a {
        padding:
            7px 8px;

        font-size: 11px;
    }


    /* -----------------------------------------
       PORTADA
    ----------------------------------------- */

    .portada {
        width: 94%;

        min-height: 500px;

        margin-top: 105px;

        border-radius: 20px;
    }

    .portada-contenido {
        width: 88%;
    }

    .logo-portada {
        width: 78px;

        height: 78px;
    }

    .portada-institucion {
        font-size: 11px;

        letter-spacing: 1.5px;
    }

    .portada h1 {
        font-size: 28px;

        line-height: 1.2;
    }

    .portada-subtitulo {
        font-size: 16px;
    }

    .portada-autor {
        font-size: 15px;
    }

    .portada-datos {
        font-size: 14px;
    }

    .btn-portada {
        min-width: 175px;

        padding:
            10px 18px;

        font-size: 13px;
    }


    /* -----------------------------------------
       CONTENIDO
    ----------------------------------------- */

    main {
        width: 94%;
    }

    section:not(.portada) {
        padding:
            22px 19px;

        border-radius: 13px;
    }

    section {
        scroll-margin-top: 165px;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.05rem;
    }

    p,
    li {
        font-size: .94rem;
    }


    /* -----------------------------------------
       IMÁGENES
    ----------------------------------------- */

    .imagen-ampliable {
        width: 92%;

        height: 230px;

        margin-left: 0;

        margin-right: auto;
    }


    /* -----------------------------------------
       TABLAS
    ----------------------------------------- */

    table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }


    /* -----------------------------------------
       VISOR
    ----------------------------------------- */

    #visor-imagen span {
        top: 10px;

        right: 20px;

        font-size: 35px;
    }
}


/* =========================================================
   ASEGURAR IMÁGENES A LA IZQUIERDA
========================================================= */

.imagen-ampliable {
    margin-left: 0 !important;

    margin-right: auto !important;
}

/* =========================================================
   BOTÓN VOLVER AL INICIO
========================================================= */

#btn-inicio {
    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e7ee;
    border-radius: 50%;

    background: #ffffff;

    color: var(--azul);

    font-size: 25px;
    font-weight: 600;

    cursor: pointer;

    z-index: 9998;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, .15);

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   BOTÓN VISIBLE
========================================================= */

#btn-inicio.visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   EFECTO AL PASAR EL MOUSE
========================================================= */

#btn-inicio:hover {
    transform: translateY(-4px);

    color: white;

    background: var(--azul);

    border-color: var(--azul);

    box-shadow:
        0 10px 28px rgba(0, 86, 179, .28);
}


/* =========================================================
   EFECTO AL PRESIONAR
========================================================= */

#btn-inicio:active {
    transform: translateY(-1px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    #btn-inicio {
        right: 18px;
        bottom: 20px;

        width: 45px;
        height: 45px;

        font-size: 22px;
    }

}

/* =========================================================
   CONTENEDOR GENERAL DE LA INTRODUCCIÓN
   ========================================================= */

.introduccion-contenedor {

    width: 86%;
    max-width: 1420px;

    margin: 35px auto 70px;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    grid-template-rows:
        auto
        1fr
        auto;

    grid-template-areas:

        "uno uno"

        "dos tres"

        "dos cuatro"

        "cinco cinco";

    gap: 22px;

    /* SOLO organiza las tarjetas */
    background: transparent;
    border: none;
    box-shadow: none;

}


/* =========================================================
   TARJETAS
   ========================================================= */

section.intro-seccion {

    position: relative;

    width: 100%;
    min-width: 0;

    background: #ffffff;

    border: 1px solid #005bbb;

    border-radius: 30px;

    padding: 38px 42px;

    box-shadow:
        0 8px 24px rgba(0, 91, 187, 0.08);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* =========================================================
   POSICIONES
   ========================================================= */

.intro-01 {
    grid-area: uno;

    min-height: 215px;
}


.intro-02 {
    grid-area: dos;

    min-height: 470px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.intro-03 {
    grid-area: tres;

    min-height: 224px;
}


.intro-04 {
    grid-area: cuatro;

    min-height: 224px;
}


.intro-05 {
    grid-area: cinco;

    min-height: 215px;
}

/* =========================================================
   COLORES POR TARJETA (incluye fondo)
========================================================= */

section.intro-seccion.intro-01 {
    background: linear-gradient(135deg, #4a90e2 0%, #6fb1fc 45%, #a6d0ff 100%);  
    border-color: #003d80;
}
section.intro-01 .intro-numero { background: #ffffff; color: #0056b3; }
section.intro-01 .intro-icono { background: rgba(255,255,255,.18); color: #ffffff; }
section.intro-01 h2, section.intro-01 h3 { color: #ffffff; }
section.intro-01 h2::after, section.intro-01 h3::after { background: #ffffff; }
section.intro-01 p { color: rgba(255,255,255,.92); }

section.intro-seccion.intro-02 {
    background: linear-gradient(135deg, #5a189a 0%, #7b2cbf 50%, #9d4edd 100%);
    border-color: #4a1580;
}
section.intro-02 .intro-numero { background: #ffffff; color: #7b2cbf; }
section.intro-02 .intro-icono { background: rgba(255,255,255,.18); color: #ffffff; }
section.intro-02 h2, section.intro-02 h3 { color: #ffffff; }
section.intro-02 h2::after, section.intro-02 h3::after { background: #ffffff; }
section.intro-02 p { color: rgba(255,255,255,.92); }

section.intro-seccion.intro-03 {
    background: linear-gradient(135deg, #05603a 0%, #0f9d58 50%, #34d399 100%);
    border-color: #044d2f;
}
section.intro-03 .intro-numero { background: #ffffff; color: #0f9d58; }
section.intro-03 .intro-icono { background: rgba(255,255,255,.18); color: #ffffff; }
section.intro-03 h2, section.intro-03 h3 { color: #ffffff; }
section.intro-03 h2::after, section.intro-03 h3::after { background: #ffffff; }
section.intro-03 p { color: rgba(255,255,255,.92); }

section.intro-seccion.intro-04 {
    background: linear-gradient(135deg, #a85400 0%, #e07b00 50%, #ffb347 100%);
    border-color: #8a4400;
}
section.intro-04 .intro-numero { background: #ffffff; color: #e07b00; }
section.intro-04 .intro-icono { background: rgba(255,255,255,.2); color: #ffffff; }
section.intro-04 h2, section.intro-04 h3 { color: #ffffff; }
section.intro-04 h2::after, section.intro-04 h3::after { background: #ffffff; }
section.intro-04 p { color: rgba(255,255,255,.94); }

section.intro-seccion.intro-05 {
    background: linear-gradient(135deg, #8c0e37 0%, #c9184a 50%, #ff6f91 100%);
    border-color: #720b2c;
}
section.intro-05 .intro-numero { background: #ffffff; color: #c9184a; }
section.intro-05 .intro-icono { background: rgba(255,255,255,.18); color: #ffffff; }
section.intro-05 h2, section.intro-05 h3 { color: #ffffff; }
section.intro-05 h2::after, section.intro-05 h3::after { background: #ffffff; }
section.intro-05 p { color: rgba(255,255,255,.92); }

section.intro-05 .intro-etiqueta {
    background: #ffffff;
    color: #c9184a;
}



/* =========================================================
   EFECTO HOVER
   ========================================================= */

section.intro-seccion:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22);

}


/* =========================================================
   NÚMEROS
   ========================================================= */

.intro-numero {

    position: absolute;

    top: 26px;
    right: 30px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #005bbb;

    color: #ffffff;

    border-radius: 50%;

    font-size: 15px;
    font-weight: 700;

}


/* =========================================================
   ICONOS
   ========================================================= */

.intro-icono {

    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    background: #eaf4ff;

    color: #0066c5;

    border-radius: 18px;

    font-size: 27px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.intro-seccion:hover .intro-icono {

    background: rgba(255,255,255,.3);

    transform: scale(1.05);

}


/* =========================================================
   TÍTULOS
   ========================================================= */

.intro-seccion h2 {

    margin: 0 0 15px;

    color: #005bbb;

    font-size: 28px;

    line-height: 1.25;

}


.intro-seccion h3 {

    margin: 0 0 14px;

    color: #005bbb;

    font-size: 23px;

    line-height: 1.25;

}


/* =========================================================
   LÍNEA DECORATIVA
   ========================================================= */

.intro-seccion h2::after,
.intro-seccion h3::after {

    content: "";

    display: block;

    width: 58px;
    height: 3px;

    margin-top: 11px;

    background: #006dcc;

    border-radius: 10px;

}


/* =========================================================
   PÁRRAFOS
   ========================================================= */

.intro-seccion p {

    margin: 0;

    color: #222222;

    font-size: 16.5px;

    line-height: 1.75;

}


/* =========================================================
   ETIQUETA DE LA SECCIÓN 05
   ========================================================= */

.intro-etiqueta {

    display: inline-block;

    width: fit-content;

    margin-top: 22px;

    padding: 10px 19px;

    background: #eaf4ff;

    color: #005bbb;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   SECCIONES PEQUEÑAS
   ========================================================= */

.intro-03,
.intro-04 {

    padding: 30px 38px;

}


.intro-03 .intro-icono,
.intro-04 .intro-icono {

    width: 58px;
    height: 58px;

    margin-bottom: 15px;

    font-size: 24px;

}


.intro-03 h3,
.intro-04 h3 {

    font-size: 22px;

}


.intro-03 p,
.intro-04 p {

    font-size: 15.5px;

    line-height: 1.65;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .introduccion-contenedor {

        width: 92%;

        grid-template-columns: 1fr;

        grid-template-areas:

            "uno"
            "dos"
            "tres"
            "cuatro"
            "cinco";

        gap: 20px;

    }

    .intro-01,
    .intro-02,
    .intro-03,
    .intro-04,
    .intro-05 {

        min-height: auto;

    }


    .intro-02 {

        min-height: 300px;

    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .introduccion-contenedor {

        width: 92%;

        margin-top: 25px;

        gap: 18px;

    }


    .intro-seccion {

        padding: 30px 25px;

        border-width: 3px;

        border-radius: 24px;

    }


    .intro-numero {

        top: 19px;
        right: 19px;

        width: 44px;
        height: 44px;

        font-size: 13px;

    }


    .intro-icono {

        width: 56px;
        height: 56px;

        font-size: 23px;

    }


    .intro-seccion h2 {

        font-size: 24px;

    }


    .intro-seccion h3 {

        font-size: 21px;

    }


    .intro-seccion p {

        font-size: 15px;

        line-height: 1.7;

    }


    .intro-etiqueta {

        font-size: 13px;

    }

}



/* =========================================================
   REFERENCIAS Y ANEXOS
========================================================= */

.recursos-finales {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 35px;

    margin-bottom: 35px;
}


/* =========================================================
   TARJETAS
========================================================= */

.recurso-card {

    position: relative;

    min-height: 230px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 32px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 22px;

    box-shadow: var(--sombra-suave);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Decoración */

.recurso-card::before {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -70px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(0, 86, 179, .06);

}


/* Hover */

.recurso-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(16, 24, 40, .12);

}


/* =========================================================
   COLORES
========================================================= */

.recurso-referencias {

    border-left:
        5px solid #0056b3;

}

.recurso-anexos {

    border-left:
        5px solid #7b2cbf;

}


/* =========================================================
   ICONOS
========================================================= */

.recurso-icono {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    font-size: 31px;

    background: #eaf4ff;

    color: #0056b3;

}


.recurso-anexos .recurso-icono {

    background: #f4eaff;

    color: #7b2cbf;

}


/* =========================================================
   CONTENIDO
========================================================= */

.recurso-contenido {

    position: relative;

    z-index: 2;

    flex: 1;

}


.recurso-numero {

    display: block;

    margin-bottom: 5px;

    color: #667085;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   TÍTULOS
========================================================= */

.recurso-card h2 {

    margin: 0 0 10px;

    padding: 0;

    color: #182230;

    font-size: 25px;

}


.recurso-card h2::after {

    display: none;

}


/* =========================================================
   TEXTO
========================================================= */

.recurso-card p {

    margin-bottom: 18px;

    color: #667085;

    font-size: 14.5px;

    line-height: 1.6;

    text-align: left;

}


/* =========================================================
   BOTÓN
========================================================= */

.btn-recurso {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 18px;

    border-radius: 25px;

    background: #0056b3;

    color: white;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 5px 14px rgba(0, 86, 179, .20);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.btn-recurso:hover {

    transform: translateY(-2px);

    background: #2bcf83;

    box-shadow:
        0 8px 18px rgba(0, 86, 179, .28);

}


/* Botón de anexos */

.recurso-anexos .btn-recurso {

    background: #7b2cbf;

    box-shadow:
        0 5px 14px rgba(123, 44, 191, .20);

}


.recurso-anexos .btn-recurso:hover {

    background: #5f2196;

    box-shadow:
        0 8px 18px rgba(123, 44, 191, .28);

}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .recursos-finales {

        grid-template-columns: 1fr;

        gap: 20px;

    }

}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media (max-width: 600px) {

    .recursos-finales {

        width: 100%;

        margin-top: 25px;

    }


    .recurso-card {

        min-height: auto;

        padding: 25px 22px;

        gap: 18px;

        border-radius: 18px;

    }


    .recurso-icono {

        width: 55px;
        height: 55px;

        border-radius: 15px;

        font-size: 24px;

    }


    .recurso-card h2 {

        font-size: 21px;

    }


    .recurso-card p {

        font-size: 14px;

    }


    .btn-recurso {

        padding: 9px 15px;

        font-size: 12px;

    }

}

/* =========================================================
   TÍTULOS CON RECUADRO DE COLOR
   (Pregunta problema hasta Conclusiones)
========================================================= */

#pregunta-problema,
#objetivos,
#hipotesis,
#justificacion,
#resumen,
#introduccion,
#marco-legal,
#metodologia,
#resultados,
#discusion,
#conclusiones {
    padding: 0 30px 28px;
    overflow: hidden;
}

#pregunta-problema > h2,
#objetivos > h2,
#hipotesis > h2,
#justificacion > h2,
#resumen > h2:first-of-type,
#introduccion > h2,
#marco-legal > h2,
#metodologia > h2,
#resultados > h2,
#discusion > h2,
#conclusiones > h2 {
    margin: 0 -30px 25px;
    padding: 18px 30px;
    color: #ffffff;
    border-radius: 16px 16px 0 0;
}

/* Quitar la rayita azul de debajo del título */
#pregunta-problema > h2::after,
#objetivos > h2::after,
#hipotesis > h2::after,
#justificacion > h2::after,
#resumen > h2:first-of-type::after,
#introduccion > h2::after,
#marco-legal > h2::after,
#metodologia > h2::after,
#resultados > h2::after,
#discusion > h2::after,
#conclusiones > h2::after {
    display: none;
}

/* Un color distinto por sección */
#pregunta-problema > h2     { background: #0f9d58; }
#objetivos > h2             { background: #2f7fd6; }
#hipotesis > h2             { background: #8e44c9; }
#justificacion > h2         { background: #c27c0e; }
#resumen > h2:first-of-type { background: #d6336c; }
#introduccion > h2          { background: #0f9d8a; }
#marco-legal > h2           { background: #3f51b5; }
#metodologia > h2           { background: #e0561b; }
#resultados > h2            { background: #8c0e37; }
#discusion > h2             { background: #7b2cbf; }
#conclusiones > h2          { background: #05603a; }


/* =========================================================
   TARJETAS DE INTRODUCCIÓN (LAYOUT CON FLOAT)
========================================================= */

.intro-grid {
    width: 86%;
    max-width: 1420px;
    margin: 35px auto 70px;
}

.intro-grid::after {
    content: "";
    display: block;
    clear: both;
}


/* ---------- TARJETA BASE ---------- */

.tarjeta {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 22px;
    padding: 38px 42px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 0 8px 24px rgba(0, 91, 187, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.tarjeta::after {
    content: "";
    display: block;
    clear: both;
}

/* Tarjetas de media página */
.mitad {
    width: 49%;
    min-height: 500px;
}

.izq {
    float: left;
    clear: left;
}

.der {
    float: right;
    clear: none;
}


/* ---------- TEXTOS ---------- */

.tarjeta h2 {
    margin: 0 0 14px;
    padding-bottom: 12px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.25;
}

.tarjeta h2::after {
    background: #ffffff;
}

.tarjeta p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .93);
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

.t-texto {
    float: left;
    width: 57%;
}


/* ---------- NÚMERO E ICONO ---------- */

.t-numero {
    position: absolute;
    top: 26px;
    right: 30px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    color: #333333;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    line-height: 52px;
    text-align: center;
}

.t-icono {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, .2);
    border-radius: 18px;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
}

.t-etiqueta {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, .22);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* ---------- ESPACIOS PARA IMAGEN ---------- */

.t-imagen {
    width: 100%;
    height: 170px;
    margin-bottom: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
    border: 2px dashed rgba(255, 255, 255, .55);
    border-radius: 18px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 700;
    line-height: 166px;
    text-align: center;
}

.t-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Imagen al lado en las tarjetas anchas */
.t-lado {
    float: right;
    width: 37%;
    height: 250px;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 246px;
}


/* ---------- BOTONES ---------- */

.t-btn {
    display: inline-block;
    margin-right: 10px;
    padding: 12px 24px;
    background: #ffffff;
    color: #20242a;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.t-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}


/* ---------- COLORES POR TARJETA ---------- */

.t1 { background: linear-gradient(135deg, #4a90e2 0%, #6fb1fc 45%, #a6d0ff 100%); }
.t2 { background: linear-gradient(135deg, #5a189a 0%, #7b2cbf 50%, #9d4edd 100%); }
.t3 { background: linear-gradient(135deg, #05603a 0%, #0f9d58 50%, #34d399 100%); }
.t4 { background: linear-gradient(135deg, #a85400 0%, #e07b00 50%, #ffb347 100%); }
.t5 { background: linear-gradient(135deg, #8c0e37 0%, #c9184a 50%, #ff6f91 100%); }
.t6 { background: linear-gradient(135deg, #0b5d6b 0%, #0e8a9c 50%, #22b8cf 100%); }
.t7 { background: linear-gradient(135deg, #07121c 0%, #0f3a52 50%, #1c6e8c 100%); }
.t8 { background: linear-gradient(135deg, #1a237e 0%, #3f51b5 50%, #7986cb 100%); }

.t1 .t-numero { color: #0056b3; }
.t2 .t-numero { color: #7b2cbf; }
.t3 .t-numero { color: #0f9d58; }
.t4 .t-numero { color: #e07b00; }
.t5 .t-numero { color: #c9184a; }
.t6 .t-numero { color: #0e8a9c; }
.t7 .t-numero { color: #0f3a52; }
.t8 .t-numero { color: #3f51b5; }


/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    .intro-grid {
        width: 92%;
    }

    .mitad,
    .izq,
    .der {
        float: left;
        clear: both;
        width: 100%;
        min-height: auto;
    }

    .t-texto,
    .t-lado {
        float: none;
        width: 100%;
    }

    .t-lado {
        height: 170px;
        margin-top: 18px;
        line-height: 166px;
    }
}

@media (max-width: 600px) {

    .tarjeta {
        padding: 30px 25px;
        border-radius: 24px;
    }

    .tarjeta h2 {
        font-size: 23px;
    }

    .t-numero {
        top: 19px;
        right: 19px;
        width: 44px;
        height: 44px;
        font-size: 13px;
        line-height: 44px;
    }
}

/* =========================================================
   FORMA: 04 ANCHA / 08 EN MITAD
========================================================= */

/* 04: tarjeta ancha con la imagen al lado */
.ancha {
    float: left;
    clear: both;
    width: 100%;
    min-height: 0;
}

.ancha .t-lado {
    margin-top: 0;
}

/* 08: al ser media tarjeta, el texto y la imagen van apilados */
.t8 .t-texto,
.t8 .t-lado {
    float: none;
    width: 100%;
}

.t8 .t-lado {
    height: 170px;
    margin-top: 18px;
    margin-bottom: 18px;
    line-height: 166px;
}

/* =========================================================
   05 a 08: MISMA ALTURA PARA QUE QUEDEN SIMÉTRICAS
========================================================= */

.t5,
.t6,
.t7,
.t8 {
    height: 540px;
    min-height: 0;
}

@media (max-width: 900px) {

    .t5,
    .t6,
    .t7,
    .t8 {
        height: auto;
    }
}
/* =========================================================
   REORGANIZACIÓN: SIN CÍRCULOS, EMOJI + TÍTULO EN LÍNEA
========================================================= */

/* Quitar los círculos con número */
.t-numero {
    display: none;
}

/* Las tarjetas se acomodan en cuadrícula: la altura de cada fila
   se iguala sola y ya no hay alturas fijas */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.intro-grid::after {
    display: none;
}

.tarjeta {
    float: none;
    clear: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
}

/* 01 y 04 ocupan todo el ancho */
.t1,
.t4 {
    grid-column: 1 / -1;
}

/* Emoji sin recuadro, con el título al lado */
.tarjeta .t-icono {
    float: left;
    width: auto;
    height: auto;
    margin: 0 14px 0 0;
    background: none;
    border-radius: 0;
    font-size: 38px;
    line-height: 46px;
}

.tarjeta h2 {
    overflow: hidden;
    margin-top: 0;
    line-height: 46px;
}

/* Etiqueta JUEGO 1 / 2 arriba a la derecha (donde estaba el círculo) */
.t-etiqueta {
    position: absolute;
    top: 30px;
    right: 34px;
    margin: 0;
}

/* El párrafo baja debajo del emoji y el título */
.tarjeta p {
    clear: left;
}

/* Espacios de imagen más grandes */
.t-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    line-height: normal;
}

.t-lado {
    height: 300px;
    line-height: normal;
}

.t8 .t-lado {
    height: 220px;
    line-height: normal;
}

/* Celular y tablet: una tarjeta por fila */
@media (max-width: 900px) {

    .intro-grid {
        grid-template-columns: 1fr;
    }

    .t-lado {
        height: 200px;
    }
}

/* =========================================================
   BOTÓN JUGAR (con triángulo de play)
========================================================= */

.btn-jugar {
    padding: 14px 30px;
    font-size: 17px;
}

.btn-jugar::before {
    content: "▷";
    margin-right: 10px;
    font-size: 24px;
    line-height: 1;
    vertical-align: middle;
}

/* =========================================================
   TARJETA 08: BOTONES APILADOS Y GRANDES
========================================================= */

/* La tarjeta se organiza en columna para que los botones
   ocupen todo el espacio que sobra */
.t8 {
    display: flex;
    flex-direction: column;
}

.t8 .t-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.t8 .t-cabecera::after {
    content: "";
    display: block;
    clear: both;
}

.t8 .t-botones {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}

/* Botones con gradiente azul del recuadro */
.t8 .t-botones .t-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    background: linear-gradient(135deg, #1a237e 0%, #3f51b5 100%);
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 22px;
}

.t8 .t-botones .t-btn:hover {
    background: linear-gradient(135deg, #3f51b5 0%, #7986cb 100%);
}
/* Alinear el emoji con el título de la tarjeta 04 */
.t4 .t-icono {
    margin-top: 24px;
}

/* =========================================================
   LETRA IGUAL EN TODAS LAS TARJETAS
========================================================= */

.tarjeta h2 {
    font-size: 28px;
}

.tarjeta p {
    font-size: 18px;
    line-height: 1.7;
}

@media (max-width: 600px) {

    .tarjeta h2 {
        font-size: 23px;
    }

    .tarjeta p {
        font-size: 16px;
    }
}

/* =========================================================
   TARJETAS 02 Y 05: TEXTO GRANDE, OCUPANDO TODO EL RECUADRO
   (van después del bloque de letra igual para que mande este)
========================================================= */

.t2 p,
.t5 p {
    margin: 0;
    padding-top: 40px;
    font-size: 21px;
    line-height: 1.9;
}

@media (max-width: 600px) {

    .t2 p,
    .t5 p {
        padding-top: 20px;
        font-size: 17px;
    }
}


/* =========================================================
   IMÁGENES: T3 CENTRADA Y T1 MÁS A LA DERECHA
========================================================= */

/* T3: imagen centrada dentro de su recuadro */
.t3 .t-imagen {
    margin-left: auto;
    margin-right: auto;
}

.t3 .t-imagen img {
    object-fit: cover;
    object-position: center center;
}

/* T1: imagen movida hacia la derecha */
.t1 .t-lado {
    margin-right: -25px;
}

/* =========================================================
   VERSIÓN PARA CELULAR Y TABLET
   (va al final para que mande sobre lo anterior)
========================================================= */

/* Evita que algo se salga de la pantalla */
html,
body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* ---------- MENÚ FLOTANTE: se abre al tocar ---------- */
@media (max-width: 1100px) {

    .navegador-secciones {
        top: 100px;
        width: auto;
        max-width: 94%;
        overflow: visible;
    }

    .barra-secciones,
    .barra-secciones:hover {
        width: 175px;
        height: 46px;
        padding: 0;
    }

    .barra-secciones.abierto {
        width: min(92vw, 380px);
        height: auto;
        max-height: calc(100vh - 170px);
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
        padding: 14px;
        border-radius: 22px;
        background: linear-gradient(135deg, #003d80, #3f51b5);
    }

    .barra-secciones.abierto .texto-busqueda {
        width: auto;
        opacity: 1;
        transform: none;
        margin-bottom: 10px;
    }

    .barra-secciones.abierto .links {
        width: 100%;
        opacity: 1;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        gap: 6px;
    }

    .barra-secciones.abierto .links a {
        padding: 12px;
        font-size: 14px;
        text-align: center;
        white-space: normal;
    }

    /* Sin :hover cuando está cerrado (en celular el hover se queda pegado) */
    .barra-secciones:not(.abierto):hover .links {
        width: 0;
        opacity: 0;
    }

    .barra-secciones:not(.abierto):hover .texto-busqueda {
        width: auto;
        opacity: 1;
        transform: none;
    }
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {

    /* iPhone/iPad no soportan background-attachment: fixed */
    body {
        background-image: none;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url("images Miguel Isaza/fondo-quimica.jpg") center / cover no-repeat;
    }

    .tarjeta img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Imágenes de las figuras (tienen width en el HTML) */
    main img[style] {
        width: 60% !important;
        height: auto !important;
    }
}

/* ---------- CELULAR ---------- */
@media (max-width: 650px) {

    main img[style] {
        width: 100% !important;
    }

    main > section {
        padding: 0 18px 22px !important;
    }

    main > section > h2:first-of-type {
        margin: 0 -18px 20px !important;
        padding: 14px 18px !important;
        font-size: 1.2rem;
    }

    main p {
        text-align: left;
    }

    /* Tablas: se pueden deslizar de lado sin romper la página */
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px !important;
    }

    .logo span {
        font-size: .78rem;
        line-height: 1.2;
    }

    .tarjeta .t-icono {
        font-size: 32px;
        line-height: 40px;
        margin-right: 12px;
    }

    .t4 .t-icono {
        margin-top: 0;
    }

    .tarjeta h2 {
        font-size: 22px;
        line-height: 1.25;
        padding-top: 6px;
    }

    .t1 .t-lado {
        margin-right: 0;
    }

    .t8 .t-botones .t-btn {
        min-height: 60px;
        font-size: 17px;
    }

    .imagen-ampliable,
    #visor-imagen img {
        max-width: 100%;
    }
}


/* =========================================================
   BOTÓN DE 3 LÍNEAS (☰) EN EL HEADER - SOLO CELULAR
========================================================= */

.btn-menu {
    display: none;
}

@media (max-width: 650px) {

    .btn-menu {
        display: block;
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        padding: 12px 11px;
        background: #eef2f8;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
    }

    .btn-menu span {
        display: block;
        height: 3px;
        margin: 4px 0;
        background: #20242a;
        border-radius: 2px;
        transition: transform .3s, opacity .3s;
    }

    /* Las 3 líneas se convierten en X al abrir */
    .btn-menu.abierto span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .btn-menu.abierto span:nth-child(2) {
        opacity: 0;
    }

    .btn-menu.abierto span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Menú desplegable bajo el header */
    nav.abierto {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 14px 15px 18px;
        background: rgba(255, 255, 255, .98);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 12px 25px rgba(0, 0, 0, .12);
    }

    nav.abierto a {
        padding: 14px;
        font-size: 1rem;
        text-align: center;
        background: #f3f6fa;
    }
}


/* =========================================================
   PORTADA MÁS LLAMATIVA
========================================================= */

.portada {
    min-height: 620px;
    border: 2px solid rgba(255, 255, 255, .25);
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 229, 255, .35) 0, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(255, 64, 129, .35) 0, transparent 38%),
        radial-gradient(circle at 80% 15%, rgba(255, 193, 7, .22) 0, transparent 28%),
        linear-gradient(135deg, #0b2a6f 0%, #1a46b8 45%, #6a3de8 100%);
    box-shadow:
        0 20px 50px rgba(26, 35, 126, .35),
        inset 0 0 60px rgba(255, 255, 255, .08);
}

/* Círculos decorativos que giran lento */
.portada::before {
  
    border-color: rgba(255, 255, 255, .09);
}

.portada::after {
    animation: girar 55s linear infinite reverse;
    border-color: rgba(255, 255, 255, .08);
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* Emojis flotantes */
.deco {
    position: absolute;
    z-index: 1;
    font-size: 46px;
    opacity: .35;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
    animation: flotar 6s ease-in-out infinite;
}

.deco1 { top: 12%;  left: 8%; }
.deco2 { top: 18%;  right: 9%;  animation-delay: -2s; font-size: 40px; }
.deco3 { bottom: 14%; left: 10%; animation-delay: -4s; }
.deco4 { bottom: 18%; right: 8%; animation-delay: -1s; font-size: 52px; }

@keyframes flotar {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-18px) rotate(6deg); }
}



/* Título grande con palabra resaltada */
.portada h1 {
    font-size: 52px;
    font-weight: 800;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}

.portada h1 .resalte {
    background: linear-gradient(90deg, #ffd54f, #ff8a65, #ff4081);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.portada-subtitulo {
    display: inline-block;
    padding: 8px 22px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 40px;
    font-size: 18px;
    backdrop-filter: blur(4px);
}

.linea-portada {
    width: 110px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffd54f, #ff4081);
}

@media (max-width: 650px) {

    .portada {
        min-height: 540px;
    }

    .portada h1 {
        font-size: 31px;
    }

    .portada-subtitulo {
        font-size: 14px;
        padding: 7px 16px;
    }

    .deco {
        font-size: 30px;
        opacity: .25;
    }

    .logo-portada {
        width: 88px;
        height: 88px;
    }
}